<template>
  <div class="goods-list-item" @click="detail(props.product.id)">
    <img v-lazy="props.product.cover_url" alt=""/>
    <div class="good-info">
      <p>{{props.product.title}}</p>
      <span class="price"><small>￥</small>{{props.product.price}}</span>
      <span class="collect"><i class="iconfont icon-shoucang1"></i>{{props.product.collects_count}}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {Goods} from "@/types/goods";
import {useRouter} from "vue-router";

const router = useRouter();
function detail(id?: number) {
  id && router.push({
    path:'/detail',
    query:{id},
  })

}

interface Props {
  product: Goods.Dto;
}


const props = withDefaults(defineProps<Props>(),{
  product:() => {
    return {};
  },
});
</script>

<style lang="scss">
@import '@/assets/css/icon/iconfont.css';

.goods-list-item {
  width: 44%;
  margin-bottom: 20px;

  img {
    width: 100%;
    border-radius: 8px;
  }

  .good-info {
    margin-top: 8px;

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 4px;
    }

    .price {
      color: red;
      margin-right: 20px;
    }

    .collect {
      font-size: 14px;

      i {
        margin-right: 8px;
      }
    }

  }

}
</style>